import { createRouter, createWebHistory } from "vue-router";
// import Home from "../views/Home.vue";

// 定义路由表
const routes = [
  // 重定向
  {
    path: "/",
    redirect: "/home",
  },
  {
    // path: "/home",
    // name: "Home",
    // component: Home,
    path: "/home",
    component: () => import("../views/Home"),
    children: [
      // 首页重定向
      {
        path: "/home",
        redirect: "/home/index",
      },
      // 首页路由
      {
        path: "/home/index",
        component: () => import("../views/home/CyIndex"),
      },

      //查产品
      {
        path: "/product",
        component: () => import("../views/CyProduct"),
      },

      //护肤榜
      {
        path: "/home/hufubang",
        component: () => import("../components/CyMine/Cyhufubang/Cyhufubang"),
      },

      //美妆榜
      {
        path: "/home/beauty",
        component: () => import("../views/home/CyBeauty"),
      },
      // 聊
      {
        path: "/home/chat",
        component: () => import("../views/home/CyChat"),
      },
      // 我的
      {
        path: "/home/mine",
        component: () => import("../views/home/CyMine"),
        // children: [
        //   {
        //     path: "/home/pifu",
        //     redirect: "../components/CyMine/CyListChild/CyPifu",
        //   },
        // ],
      },
      //我的里面的测试皮肤
      {
        path: "/home/cefu",
        component: () => import("../components/CyMine/Cycefu/Cycefu"),
      },
      //我的里面的皮肤检测
      {
        path: "/home/pifu",
        component: () => import("../components/CyMine/CyListChild/CyPifu"),
      },
      //护肤榜
      {
        path: "/home/hufubang",
        component: () => import("../components/CyMine/Cyhufubang/Cyhufubang"),
      },
      // 定制
      {
        path: "/home/customize",
        component: () => import("../views/home/CyCustomize"),
      },
    ],
  },
  // 首页 品牌馆
  {
    path: "/home/index/brand",
    component: () => import("../components/brand/CyIndexbrand"),
  },
  // 登录
  {
    path: "/register",
    component: () => import("../views/CyRegister"),
  },
  // 定制详情页
  {
    path: "/newproduct/detail/:id",
    component: () => import("../views/home/CyDetail"),
    props: true,
  },
  // 404
  {
    path: "/:catchAll(.*)",
    name: "/404",
    component: () => import("../views/CyNotfound"),
  },
];

// 定义路由实例
const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes,
  // 滚动效果 -- 使用前端路由，当切换到新路由时，想要页面滚到顶部，或者是保持原先的滚动位置，就像重新加载页面那样。scrollBehavior 方法接收 to 和 from 路由对象。第三个参数 savedPosition 当且仅当 popstate 导航 (通过浏览器的 前进/后退 按钮触发) 时才可用
  scrollBehavior(to, from, savedPosition) {
    if (savedPosition) {
      return savedPosition;
    } else {
      return { x: 0, y: 0 };
    }
  },
});

// 用于解决router重复点击的报错
const originalPush = createRouter.prototype.push;
createRouter.prototype.push = function push(location) {
  return originalPush.call(this, location).catch((err) => err);
};

// 暴露路由实例
export default router;
